<!--
 * @Description: 首页
 * @Author: rendc
 * @Date: 2023-12-06 16:08:14
 * @LastEditors: rendc
 * @LastEditTime: 2023-12-08 16:45:37
-->
<!-- 相当于html 是页面结构 -->
<template>
  <!-- 搜索框 -->
  <van-search
    v-model="value"
    shape="round"
    background="#FFFFFF"
    placeholder="搜索:目的地/酒店/景点/航班号"
  />
  <!-- 模板语法 -->
  <!-- --{{ value }}-- -->
  <!-- 1. 文字大小不太一样 - placeholder -文字样式怎么调节-->
  <!-- 2. 图标不太一致 - left-icon -->
  <!-- 宫格的轮播-->
  <van-swipe indicator-color="0086f6" class="my-swipe" @change="swipeChange">
    <van-swipe-item>
      <!-- 宫格 -->
      <div class="gridMainDiv">
        <van-grid :column-num="5" :border="false" >
          <div class="gridDiv" @click="gridClick(item.url)"  v-for="item in gridData" :key="item.id"
          :style="{backgroundColor:item.color,backgroundImage:item.color,}">
            <!-- 图标 -->
            <van-icon size="28" :name="item.img" />
            <br>
            <!-- 文字 -->
            {{ item.name }}
            <!-- @click="gridClick" 事件绑定 -->
            <!-- <van-grid-item @click="gridClick" :icon="item.img" :text="item.name"/> -->
          </div>
        </van-grid>
      </div>
    </van-swipe-item>
    <van-swipe-item :style="{height: height+'px'}">
      <!-- 宫格 -->
      <div class="gridMainDiv">
        <van-grid :column-num="5" :border="false" >
          <div class="gridDiv" @click="gridClick(item.url)"  v-for="item in gridData" :key="item.id"
          :style="{backgroundColor:item.color,backgroundImage:item.color,}">
            <!-- 图标 -->
            <van-icon size="28" :name="item.img" />
            <br>
            <!-- 文字 -->
            {{ item.name }}
            <!-- @click="gridClick" 事件绑定 -->
            <!-- <van-grid-item @click="gridClick" :icon="item.img" :text="item.name"/> -->
          </div>
        </van-grid>
      </div>
      <!-- 宫格 -->
      <div class="gridMainDiv">
        <van-grid :column-num="5" :border="false" >
          <div class="gridDiv" @click="gridClick(item.url)"  v-for="item in gridData" :key="item.id"
          :style="{backgroundColor:item.color,backgroundImage:item.color,}">
            <!-- 图标 -->
            <van-icon size="28" :name="item.img" />
            <br>
            <!-- 文字 -->
            {{ item.name }}
            <!-- @click="gridClick" 事件绑定 -->
            <!-- <van-grid-item @click="gridClick" :icon="item.img" :text="item.name"/> -->
          </div>
        </van-grid>
      </div>
    </van-swipe-item>
  </van-swipe>
  <!-- 自定义的左右布局 -->
  <!-- 外层div -->
  <!-- <div class="main">
    <div class="left">
      左
    </div>
    <div class="right">右</div>
  </div> -->
  <div class="myCardMain">
    <van-row>
      <van-col span="12">
        <!-- 左边 -->
        <div class="myCard">
          <van-row>
            <van-col span="10">
              <van-image width="73" height="20"
              src="https://images4.c-ctrip.com/target/0zc71120008g0ha4z93C6.png" />
            </van-col>
            <van-col span="14" style="text-align: right;">
              <van-tag color="#ffebe3" text-color="#ff4607
              ">特价好货...</van-tag>
            </van-col>
          </van-row>
          <!-- 轮播 高度 106 :autoplay="3000"-->
          <van-swipe class="my-swipe" height="106" indicator-color="white">
                <van-swipe-item v-for="item in swipeData" :key="item.id">
                    <!-- 轮播内容 -->
                    <div class="swipeItem">
                      <van-tag class="tag" round color="#333333CC">{{ item.tag }}</van-tag>
                      <div class="product">{{ item.product }}</div>
                      <van-image
                        class="image"
                        lazy-load
                        width="148"
                        height="84"
                        fit="cover"
                        :src="item.image"
                      />
                      <div style="color: #F60;font-size: 12px;">  
                        ￥<span style="font-size: 16px;">{{ item.price }}</span>
                      </div>
                    </div>
                </van-swipe-item>
                <!-- 插槽 total是总数 active(0-2)-->
                <template #indicator="{ active, total }">
                  <div class="customIndicator">
                    <!-- {{ active }} -->
                    <div class="point" :class="{activeClass:active+1 == item}" v-for="item in total"></div>
                    <!-- <div class="point" :class="{activeClass:active == 0}"></div>
                    <div class="point" :class="{activeClass:active == 1}"></div>
                    <div class="point" :class="{activeClass:active == 2}"></div> -->
                    <!-- {{ active + 1 }}/{{ total }} -->
                  </div>
                </template>
          </van-swipe>
        </div>  
      </van-col>
      <van-col span="12">
        <!-- 右边 -->
        <div class="myCard">
          <van-row>
            <van-col span="10">
              <van-image width="73" height="20"
              src="https://images4.c-ctrip.com/target/0zc6g120008g0hcb587E5.png" />
            </van-col>
            <van-col span="14" style="text-align: right;">
              <van-tag color="#fdefd2" text-color="#ae6e15
              ">权威排行榜</van-tag>
            </van-col>
          </van-row>
          <!-- 两个小卡片 -->
          <van-row>
            <van-col span="12">
              左
            </van-col>
            <van-col span="12">
              右
            </van-col>
          </van-row>
        </div>  
      </van-col>
    </van-row>
  </div>

</template>

<!-- 相当于 js代码 setup语法糖 -->
<script setup>
// 从vue中导入 ref
import { ref } from "vue";

// 声明一个响应式变量 value 初始值是 ""
const value = ref("");

// 声明一个变量 用来存放 grid 的数据 - 等对接后台之后数据是实时查询的
const gridData = [
  // 第一排
  {
    id:"1",
    img:"https://bd-s.tripcdn.cn/modules/basebiz/h5home/hotel.fc17d0f7726132bf2459621923704f0f.png",
    name:"酒店",
    color:"-webkit-gradient(linear,left top,left bottom,from(#fa5956),to(#fb8650))",
    url:"https://m.ctrip.com/webapp/hotel/?secondwakeup=true&dpclickjump=true&allianceid=5376&sid=353699&sourceid=55551829&from=https%3A%2F%2Fm.ctrip.com%2Fhtml5%2F"
  },
  {
    id:"2",
    img:"https://bd-s.tripcdn.cn/modules/basebiz/h5home/flight.2af1e1835a10709db9ad91702e30de35.png",
    name:"机票",
    color:"-webkit-gradient(linear,left top,left bottom,from(#3c8cfa),to(#50b2fa))",
    url:"https://m.ctrip.com/html5/flight/swift/index?from=https%3A%2F%2Fm.ctrip.com%2Fhtml5%2F"
  },
  {
    id:"3",
    img:"https://bd-s.tripcdn.cn/modules/basebiz/h5home/train_ticket.62fc76e6f4ffac3d2e4610c807f535bb.png",
    name:"火车票",
    color:"-webkit-gradient(linear,left top,left bottom,from(#4778F6),to(#4398F8))",
    url:""
  },
  {
    id:"4",
    img:"https://bd-s.tripcdn.cn/modules/basebiz/h5home/vacation.50ea6db60ea69086791ea507b62364bb.png",
    name:"旅游",
    color:"-webkit-gradient(linear,left top,left bottom,from(#00BBB0),to(#00D0AF))",
    url:""
  },
  {
    id:"5",
    img:"https://bd-s.tripcdn.cn/modules/basebiz/h5home/gs.24c525633ba91ad0a2c41ff96773262b.png",
    name:"攻略",
    color:"-webkit-gradient(linear,left top,left bottom,from(#FF8639),to(#FFA047))",
    url:""
  },
  // 第二排
  {
    id:"21",
    img:"https://bd-s.tripcdn.cn/modules/basebiz/h5home/hotel_inn.cbccfdc8449dea7bf83171dfa7ea6f81.png",
    name:"民宿",
    color:"#FFF4EF",
    url:""
  },
  {
    id:"22",
    img:"https://bd-s.tripcdn.cn/modules/basebiz/h5home/flight_package.7485a98b650ea13917e3cdd36f3eda67.png",
    name:"机+酒",
    color:"#EAF8FF",
    url:""
  },
  {
    id:"23",
    img:"https://bd-s.tripcdn.cn/modules/basebiz/h5home/bus_ticket.19d2e8eb864288544912b3c1005c9a8e.png",
    name:"汽车",
    color:"#EFF3FE",
    url:""
  },
  {
    id:"24",
    img:"https://bd-s.tripcdn.cn/modules/basebiz/h5home/ticket.e872065047ec929016de33d36e578e49.png",
    name:"门票",
    color:"#E5FBF8",
    url:""
  },
  {
    id:"25",
    img:"https://bd-s.tripcdn.cn/modules/basebiz/h5home/food.bd1b63c6ba0a16ebc583b4e45b9ac41a.png",
    name:"美食",
    color:"#FFF8F1",
    url:""
  },
  {
    id:"1",
    img:"https://bd-s.tripcdn.cn/modules/basebiz/h5home/hotel.fc17d0f7726132bf2459621923704f0f.png",
    name:"酒店",
    color:"#FFF4EF",
    url:""
  },
  {
    id:"2",
    img:"https://bd-s.tripcdn.cn/modules/basebiz/h5home/hotel_inn.cbccfdc8449dea7bf83171dfa7ea6f81.png",
    name:"机票",
    color:"#EAF8FF",
    url:""
  },
  {
    id:"3",
    img:"https://bd-s.tripcdn.cn/modules/basebiz/h5home/hotel.fc17d0f7726132bf2459621923704f0f.png",
    name:"火车票",
    color:"#EFF3FE",
    url:""
  },
  {
    id:"4",
    img:"https://bd-s.tripcdn.cn/modules/basebiz/h5home/hotel.fc17d0f7726132bf2459621923704f0f.png",
    name:"旅游",
    color:"#E5FBF8",
    url:""
  },
  {
    id:"5",
    img:"https://bd-s.tripcdn.cn/modules/basebiz/h5home/hotel.fc17d0f7726132bf2459621923704f0f.png",
    name:"攻略",
    color:"#FFF8F1",
    url:""
  },
];
// 轮播的数据
const swipeData = [
  {
    id:"1",
    image:"https://images4.c-ctrip.com/target/0205h120008m1dfqmD3EB_D_280_280_R5.jpg",
    tag:"酒店套餐",
    product:"上海海昌奥特曼主题酒店1晚",
    price:100,
  },
  {
    id:"2",
    image:"https://images4.c-ctrip.com/target/1mc0e12000ah67cjo01FF_D_280_280_R5.jpg",
    tag:"奥特曼套餐",
    product:"上海海昌奥特曼主题酒店1晚",
    price:200,
  },
  {
    id:"3",
    image:"https://images4.c-ctrip.com/target/02041120008x10qu3D551_D_280_280_R5.jpg",
    tag:"门票套餐",
    product:"上海海昌奥特曼主题酒店1晚",
    price:50,
  },
]

// 事件的声明
// 形参 组件库规定好的	event: MouseEvent 
const gridClick = (url) => {
  // 函数体
  console.log('🤡 CC - gridClick - url:', url);
  // 页面跳转
  window.location.href=url;
  // 还可以路由跳转
  // router
};
// function gridClick(event) {
//   // 选中要输出的变量 然后 ctrl+alt+l
//   console.log('🤡 CC - gridClick - event:', event);
//   // System.out.println("a");
// }
// 定义一个变量 控制轮播的高度
const height = ref(198);
// 轮播切换结束后自动触发的事件
const swipeChange = (index) => {
  // console.log('🤡 CC - swipeChange - index:', index);
  // 让轮播翻页的时候调整一下高度
  // 当 index == 1 轮播为第二页的时候
  if (index == 1) {
    // 轮播第二页的高度是 384px 响应式变量赋值用.value
    // height.value = 384;
    // height 198 + 186 = 384
    for (let i = 0; i < 186; i++) {
      // 超时执行
      setTimeout(()=>{
        height.value++
      },1*i)
    }
  }else{
    // 轮播第一页的高度 198px
    // height.value = 198;
    for (let i = 0; i < 186; i++) {
      setTimeout(()=>{
        height.value--
      },1*i)
    }
  }
}
</script>

<!-- 写样式的地方 防止样式污染-->
<style scoped>

/* 类名选择器 */
:deep(.van-search__content){
  /* 指定文字颜色为红色 */
  /* color:red; */
  /* background-color: red; */
  /* 边框 边框宽度 实线  颜色*/
  border: 1px solid #8DC3F7;
  /* color:#fa5956;
  color:#fb8650; */
}
.gridMainDiv{
  /* 边距 */
  margin:12px;
  /* 边框 */
  /* border: 1px solid red; */
  /* 边框圆角 */
  border-radius: 10px;
  /* 超出部分隐藏 */
  overflow: hidden;
}
.gridDiv{
  width: calc(100% / 5);
  /* border: 1px solid red; */
  font-size: 12px;
  height: 58px; 
  /* 文字颜色 */
  color: #333333;
  /* 文本的对齐方式 - 居中对齐 */
  text-align: center;
  /* color: #fff;
  color: #FFFFFF; */
}
/* .类选择器 :伪类选择器 #id选择器*/
.gridDiv:nth-child(-n+5) 
{
  color: white;
}
/* 轮播 */
.my-swipe .van-swipe-item {
    /* color: #ffffff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed; */
  }
  
</style>

<!-- 用less语法的 -->
<style lang="less" scoped>
// 可以使用变量
// @link-color:#428bca; // sea blue
// 可以更方便的处理父子关系的选择器
.main{
  border: 1px solid hotpink;
  height: 100px;
  // 左右布局 
  .left,.right{
    border: 1px solid yellowgreen;
    height: 100%;
    width: calc(50% - 5px);
  }
  .left{
    float: left;
  }
  .right{
    float: right;
  }
}

.myCardMain{
  // border: 1px solid skyblue;
  // padding: 0 8px; // padding-left = padding-right = 8px
  padding-left:8px;
  background-color:#f4f4f4;
}
// myCard
.myCard{
  // width: calc(100% - 28px);
  background-color: white;
  border-radius: 8px;
  // border: 1px solid red;
  padding:8px;
  margin-right:8px;
  // margin:0px 0px 0px 8px;
}
.swipeItem{
  position: relative;
  .tag{
    // 相对于最近的一个定位元素定位，如果没有那么就根据body定位
    position: absolute;
    top: 0;
    z-index: 100;
    border-radius: 6px 0 6px 0; // 上 右 下 左
  }
  .image{
    border-radius: 6px;
    // border: 1px solid red;
    // 超出部分隐藏
    overflow: hidden;
  }
  .product{
    font-size: 12px;
    color: white;
    font-weight: bold;
    position: absolute;
    bottom: 2em;
    z-index: 100;
    margin: 6px;
    // width: calc(100% - 12px);
  }
}

// 轮播图的指示器
.customIndicator {
  .point {
    width: 2px;
    height: 2px;
    background-color: #333333;
    border-radius: 50%;
  }
  .activeClass{
    width: 10px;
  }
  position: absolute;
  right: 5px;
  top: 0px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
</style>

<!-- 用来自定义vant组件的全局样式 -->
<style>
:root{
  --van-grid-item-text-color:#FFFFFF;
  /* --van-grid-item-content-background:red; */
}
</style>